<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-08 14:24:50
-->
<template>
  <!--1. 容器 -->
  <div ref="Right1_container" id="container2" style="height: 95%"></div>
</template>
<script>
  //引入折线构造函数
import { DualAxes } from '@antv/g2plot';
  export default{
   data(){
      return{
         dataArr:[{ year: '7', boy: 3, girl: 10 },
  { year: '8', boy: 5, girl: 4 },
  { year: '9', boy: 8, girl: 5 },
  { year: '10', boy: 5, girl: 8 },
  { year: '11', boy: 9, girl: 16 },
  { year: '12', boy: 6, girl: 35 },
  { year: '13', boy: 7, girl: 7 },
  { year: '14', boy: 9, girl: 1 },
  { year: '15', boy: 13, girl: 20 }],
       data:[{ year: '7', value: 7, count: 2 },
  { year: '8', value: 6, count: 13 },
  { year: '9', value: 4, count: 25 },
  { year: '10', value: 3, count: 34 },
  { year: '11', value: 9, count: 12 },
  { year: '12', value: 6, count: 32 },
  { year: '13', value: 7, count: 31 },
  { year: '14', value: 9, count: 22 },
  { year: '15', value: 13, count: 12 }]
       }
   },
   created(){

   },
   mounted(){
    this.initChart()   },
   methods:{
     //创建一个折线图实例对象
     initChart(){
       const dualAxes = new DualAxes('container2', {
  data: [this.dataArr, this.data],
  xField: 'year',
  yField: ['boy', 'girl'],
  geometryOptions: [
    {
      geometry: 'line',
      color: '#5B8FF9',
    },
    {
      geometry: 'line',
      color: '#5AD8A6',
    },
  ],
});

dualAxes.render();

     }
   }
  }
</script>
<style scoped>

</style>